<template>
  <div class="work-detail-wrap">

    <div class="carousel-box">
      <swiper :options="swiperOption" class="work-carousel" ref="mySwiper" v-if=slideList.length>
        <swiper-slide v-for="(slide,index) in slideList" :key="index">
          <img :src="slide" class="carousel"/>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <img src="./back2.png" class="pic1" @click="toBack"/>
    </div>

    <div class="company-box">
      <div class="item-con">
        <span class="work-type">{{workName}}</span>
        <span class="work-money">{{workMoney}}</span>
      </div>
      <div class="item-con">
        <div class="lend-money" v-if="lendType == 1">可借支</div>
        <div class="fee-box" v-if="reMoney > 0">
          <span class="fee-title">返费</span>
          <span class="fee">{{reMoney}}</span>
        </div>
      </div>
      <div class="item-con">
        <img src="./company.png" class="pic2"/>
        <span class="company-name">{{mechanismName}}</span>
      </div>
    </div>
    <div class="salary-box">
      <span class="headline">薪资说明：</span>
      <div class="content" v-html="workSalary"></div>
      <span class="explain-title" v-if="this.reMoney && this.reTime">返费说明：</span>
      <div class="fee-explain" v-html="feeExplain"></div>
    </div>

    <div class="sleep-box">
      <span class="headline">食宿说明：</span>
      <div class="content" v-html="eatSleep"></div>
    </div>

    <div class="invite-box">
      <span class="headline">招聘要求：</span>
      <div class="content" v-html="workDemand"></div>
    </div>

    <div class="enterprise-box">
      <span class="headline">企业简介：</span>
      <span v-html="brief"></span>
      <span>地址: {{briefAddr}}</span>
    </div>

    <div class="btn-box">
      <button type="button" class="service" @click="delWork">删除</button>
      <button type="button" class="entry" @click="modifyWork">编&nbsp;&nbsp;辑</button>
    </div>
  </div>
</template>

<script>
  import {insertWork, queryIssueWorkDetail} from "../../../axios/api"
  import {removeSessionStore} from "../../../config/util";

  export default {
    inject: ['reload'],
    data() {
      return {
        swiperOption: {
          notNextTick: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          autoplay: {
            delay: 3000,
            disableOnInteraction: false
          },
          loop: true,
          observer: true,
          observeParents: true
        },
        workId: "",
        slideList: [],
        identity: "",
        lendType: "",
        workName: "",
        workMoney: "",
        workSalary: "",
        eatSleep: "",
        workDemand: "",
        brief: "",
        briefAddr: "",
        mechanismName: "",
        reTime: "",
        reMoney: "",
        mechanismId: "",
        workUrl: "",
        type: 0,//1新增 2修改,
        postType: "",
        feeExplain: "",
        mark: ""
      }
    },
    mounted() {
      this.workId = this.$route.query.issueId;
      this.type = this.$route.query.type;
      this.identity = this.$store.getters.getIdentity;
      this.queryWorkDetail();
    },
    methods: {
      toBack() {//返回
        this.clearCacheWork();
        this.$router.push("/issuework");
      },
      queryWorkDetail() {//查询招工详情
        this.$vux.loading.show({
          text: '加载中',
        });

        let params = {
          "workId": this.workId,
          "sgin": this.identity
        };
        queryIssueWorkDetail(params).then((res) => {
          this.$vux.loading.hide();
          console.log(JSON.stringify(res))
          if (res.code == 0 && res.data != null) {

            if (res.data.mechanismUrl != null) {//轮播图
              let picList = res.data.mechanismUrl.split(",");
              for (let i = 0, length = picList.length; i < length; i++) {
                this.slideList.push(picList[i]);
              }
            }
            this.workName = res.data.workTypeName;//岗位名称
            this.workMoney = res.data.postType == 1 ? res.data.workMoney + "元/小时" : res.data.wageRange + "元/月";//工种0正式1小时
            this.reMoney = res.data.reMoney; //返费金额
            this.workSalary = res.data.workSalary;//薪资福利
            this.eatSleep = res.data.eatSleep;//住宿餐饮
            this.workDemand = res.data.workDemand;//入职要求
            this.brief = res.data.mechanismDetails;//公司简介
            this.briefAddr = res.data.mechanismAddress;//公司地址
            this.mechanismName = res.data.mechanismName;//企业名称

            this.reTime = res.data.reTime; //返费时间（单位：月）
            this.mechanismId = res.data.mechanismId; //企业id
            this.lendType = res.data.lendType;//1可借支

            if (this.reMoney && this.reTime) {
              let totalFee = this.reMoney * this.reTime;
              this.feeExplain = `入职考勤满一个月后，每个月可领取奖励${this.reMoney}元，可领取${this.reTime}个月，共${totalFee}元。返费金额会随着工厂招工情况随时变动，具体以入职时为准。`;
            }
          }
        });
      },
      delWork() {//删除
        this.$vux.loading.show({
          text: '加载中',
        });
        let data = {
          "sgin": this.identity,
          "id": this.workId,
          "delStatus": 1
        };

        insertWork(data).then((res) => {
          if (res.code == 0) {
            if (res.data != 0) {
              this.clearCacheWork();
              this.$router.push("/issuework");
            } else {
              this.$vux.toast.text("删除失败，请重试", "middle");
            }
          }
        });
      },
      modifyWork() {//修改
        this.$router.push({
          path: "/workedit",
          query: {"workId": this.workId, "mechanismId": this.mechanismId, "type": 2, "flag": 1}
        });
      },
      clearCacheWork() {//清除缓存
        removeSessionStore("work");
        removeSessionStore("foodExplain");
        removeSessionStore("salaryExplain");
        removeSessionStore("workExplain");
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../assest/mixin";

  .work-detail-wrap {
    .wh(100%, auto);
    background: @talent-theme-bg-color;
    .carousel-box {
      position: relative;
      .wh(100%, 7.507rem);
      .work-carousel {
        .wh(100%, 7.507rem);
        .carousel {
          .wh(100%, 100%);
        }
      }
      .pic1 {
        position: fixed;
        top: 0.24rem;
        left: 0.32rem;
        z-index: 1;
        .wh(0.747rem, 0.747rem)
      }
    }
    .company-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-bottom: 0.267rem;
      .wh(100%, 2.64rem);
      background: @talent-bg-color;
      .item-con {
        display: flex;
        justify-content: space-between;
        padding-left: 0.32rem;
        padding-right: 0.32rem;
        &:first-child {
          padding-top: 0.467rem;
          padding-bottom: 0.2rem;
        }
        &:last-child {
          justify-content: flex-start;
          align-items: center;
        }
        .work-type {
          .size-color-weight(0.4rem, rgba(51, 51, 51, 1), 500);
        }
        .work-money {
          .size-color-weight(0.4rem, rgba(255, 145, 38, 1), 500);
        }
        &:nth-child(2) {
          padding-bottom: 0.4rem;
        }
        .lend-money {
          .fj(center, center);
          .wh(1.12rem, 0.4rem);
          background: rgba(240, 246, 250, 1);
          .border-radius(0.053rem);
          .size-color(0.293rem, rgba(161, 171, 179, 1));
          line-height: 0.4rem;
        }
        .company-name {
          .size-color(0.347rem, rgba(102, 102, 102, 1));
        }
        .pic2 {
          .wh(0.4rem, 0.4rem);
          margin-right: 0.213rem;
        }
        .fee-box {
          display: flex;
          margin-left: auto;
          .wh(1.787rem, 0.4rem);
          .fee-title {
            .wh(0.72rem, 0.4rem);
            background: rgba(77, 207, 190, 1);
            border-radius: 0.053rem 0rem 0rem 0.053rem;
            .size-color(0.293rem, rgba(255, 255, 255, 1));
            text-align: center;
            line-height: 0.4rem;
          }
          .fee {
            text-align: center;
            line-height: 0.347rem;
            .wh(1.147rem, 0.347rem);
            border: 0.027rem solid rgba(77, 207, 190, 1);
            border-radius: 0rem 0.053rem 0.053rem 0rem;
            .size-color-weight(0.293rem, rgba(77, 207, 190, 1), 500);
          }
        }
      }
    }
    .salary-box {
      display: flex;
      flex-direction: column;
      margin-bottom: 0.267rem;
      .wh(100%, auto);
      background: @talent-bg-color;
      span {
        padding-left: 0.32rem;
        padding-bottom: 0.253rem;
        .size-color(0.373rem, rgba(102, 102, 102, 1));
        &:first-child {
          padding-top: 0.48rem;
          padding-bottom: 0.36rem;
          .size-color-weight(0.427rem, rgba(51, 51, 51, 1), 500);
        }
      }
      .content {
        margin-left: 0.32rem;
        /deep/ p {
          .size-color(0.373rem, rgba(102, 102, 102, 1));
          line-height: 0.6rem;

          &:last-child {
            padding-bottom: 0.507rem;
          }
        }
      }
      .fee-explain {
        margin: 0 auto;
        padding-bottom: 0.48rem;
        width: 9.36rem;
        .size-color(0.373rem, rgba(255, 145, 38, 1));
        line-height: 0.48rem;
      }
      .explain-title {
        padding-left: 0.32rem;
        padding-bottom: 0.253rem;
        .size-color-weight(0.373rem, rgba(255, 145, 38, 1), 500);
      }
    }
    .sleep-box {
      display: flex;
      flex-direction: column;
      margin-bottom: 0.267rem;
      .wh(100%, auto);
      background: @talent-bg-color;
      span {
        padding-left: 0.32rem;
        padding-bottom: 0.253rem;
        .size-color(0.373rem, rgba(102, 102, 102, 1));
        &:first-child {
          padding-top: 0.48rem;
          padding-bottom: 0.36rem;
          .size-color-weight(0.427rem, rgba(51, 51, 51, 1), 500);
        }
      }
      .content {
        margin-left: 0.32rem;
        /deep/ p {
          .size-color(0.373rem, rgba(102, 102, 102, 1));
          line-height: 0.6rem;

          &:last-child {
            padding-bottom: 0.507rem;
          }
        }
      }
    }
    .invite-box {
      display: flex;
      flex-direction: column;
      margin-bottom: 0.267rem;
      .wh(100%, auto);
      background: @talent-bg-color;
      span {
        padding-left: 0.32rem;
        padding-bottom: 0.253rem;
        .size-color(0.373rem, rgba(102, 102, 102, 1));
        &:first-child {
          padding-top: 0.48rem;
          padding-bottom: 0.36rem;
          .size-color-weight(0.427rem, rgba(51, 51, 51, 1), 500);
        }
      }
      .content {
        margin-left: 0.32rem;
        /deep/ p {
          .size-color(0.373rem, rgba(102, 102, 102, 1));
          line-height: 0.6rem;

          &:last-child {
            padding-bottom: 0.507rem;
          }
        }
      }
    }
    .enterprise-box {
      display: flex;
      flex-direction: column;
      margin-bottom: 0.267rem;
      .wh(100%, auto);
      background: @talent-bg-color;
      span {
        padding-left: 0.32rem;
        padding-bottom: 0.253rem;
        .size-color(0.373rem, rgba(102, 102, 102, 1));
        &:first-child {
          padding-top: 0.48rem;
          padding-bottom: 0.36rem;
          .size-color-weight(0.427rem, rgba(51, 51, 51, 1), 500);
        }
        &:nth-child(2) {
          line-height: 0.44rem;
        }
        &:last-child {
          padding-bottom: 1.6rem;
        }
      }
    }
    .btn-box {
      position: fixed;
      bottom: 0;
      .fj(center, space-between);
      .wh(100%, 1.6rem);
      background: @talent-bg-color;
      .service {
        margin-left: 0.32rem;
        .wh(2.453rem, 1.013rem);
        border: 0.027rem solid rgba(255, 143, 51, 1);
        .border-radius(0.16rem);
        .size-color-weight(0.427rem, rgba(255, 143, 51, 1), 500);
        background: @talent-bg-color;
      }
      .entry {
        margin-right: 0.32rem;
        .wh(6.613rem, 1.067rem);
        background: rgba(255, 143, 51, 1);
        .border-radius(0.16rem);
        .size-color-weight(0.453rem, rgba(255, 255, 255, 1), 500);
      }
    }
  }
</style>
